<template>
  <div class="toast-container">
    <Toast
      v-for="toast in toasts"
      :key="toast.id"
      :type="toast.type"
      :title="toast.title"
      :message="toast.message"
      :duration="toast.duration"
      :auto-close="toast.autoClose"
      @close="removeToast(toast.id)"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Toast from './Toast.vue'
import { toastState, toast } from '../utils/toast.js'

const toasts = computed(() => toastState.toasts)

const removeToast = (id) => {
  toast.remove(id)
}
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
  pointer-events: none;
}

.toast-container > * {
  pointer-events: auto;
}
</style>
